<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论管理</title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">
    <!-- Favicon -->
    <link rel="shortcut icon" href="background/images/favicon.ico">
    <!-- Switchery css -->
    <link href="background/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <!-- Bootstrap CSS -->
    <link href="background/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome CSS -->
    <link href="background/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Custom CSS -->
    <link href="background/css/style.css" rel="stylesheet" type="text/css" />
    <!-- BEGIN CSS for this page -->
    <link rel="stylesheet" type="text/css" href="common/css/dataTables.bootstrap4.min.css"/>
    <!--引入adminkit模板-->
    <link href="adminkit/css/app.css" rel="stylesheet">
    <style>
        td.details-control {
            background: url('background/plugins/datatables/img/details_open.png') no-repeat center center;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('background/plugins/datatables/img/details_close.png') no-repeat center center;
        }
    </style>
    <!-- END CSS for this page -->
</head>
<body >
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content js-simplebar">
            <a class="sidebar-brand" href="#">
                <span class="align-middle">后台管理</span>
            </a>

            <ul class="sidebar-nav">

                <li class="sidebar-item ">
                    <a class="sidebar-link" th:href="@{/dashboard}">
                        <i class="align-middle" data-feather="sliders"></i> <span class="align-middle">首页</span>
                    </a>
                </li>


                <li class="sidebar-item ">
                    <a class="sidebar-link" href="/publishedArticleManage">
                        <i class="align-middle" data-feather="book"></i> <span class="align-middle">文章管理</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="/kindManage">
                        <i class="align-middle" data-feather="credit-card"></i> <span class="align-middle">分类管理</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="/tagManage">
                        <i class="align-middle" data-feather="tag"></i> <span class="align-middle">标签管理</span>
                    </a>
                </li>
                <li class="sidebar-item active">
                    <a class="sidebar-link" th:href="@{/commentManage}">
                        <i class="align-middle" data-feather="message-square"></i> <span class="align-middle">评论管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="/frontInfo">
                        <i class="align-middle" data-feather="airplay"></i> <span class="align-middle">外观管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/statistics}">
                        <i class="align-middle" data-feather="box"></i> <span class="align-middle">统计</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="/adminInfo">
                        <i class="align-middle" data-feather="user"></i> <span class="align-middle">个人信息管理</span>
                    </a>
                </li>
            </ul>


        </div>
    </nav>
    <div class="main">
        <!-- top bar navigation -->
        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle d-flex">
                <i class="hamburger align-self-center"></i>
            </a>
            <a href="/" class="btn btn-outline-info" disabled>返回前台首页</a>

            <div class="navbar-collapse collapse">
                <ul class="navbar-nav navbar-align">
                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                            <div class="position-relative">
                                <i class="align-middle" data-feather="message-square"></i>
                                <span class="indicator" >[[${session.unReadCount}]]</span>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
                            <div class="dropdown-menu-header">
                                <div class="position-relative">
                                    [[${session.unReadCount}]]条新评论
                                </div>
                            </div>
                            <div class="list-group">
                                <a th:href="@{/commentManage}" class="list-group-item" th:each="comment:${session.unReadComment}">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-danger" data-feather="alert-circle"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">[[${comment.name}]]</div>
                                            <div class="text-muted small mt-1">[[${comment.content}]]</div>
                                            <div class="text-muted small mt-1">[[${ #dates.format(comment.time,'yyyy年MM月dd日 ')}]]</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="dropdown-menu-footer">
                                <a th:href="@{/commentManage}" class="text-muted">所有评论</a>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                            <i class="align-middle" data-feather="settings"></i>
                        </a>

                        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown" >
                            <img th:src="${session.admin.img}" class="avatar img-fluid rounded mr-1"  th:alt="${session.admin.name}"/> <span class="text-dark">[[${session.admin.name}]]</span>                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="/logout">Log out</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="content-page" style="margin: 0px">

            <!-- Start content -->
            <div class="content">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-xl-12">
                                <h1 class="main-title float-left">
                                    <i class="fa fa-comment bigfonts"></i> 评论 &ensp;
                                </h1>

                                <ol class="breadcrumb float-right">
                                    <li class="breadcrumb-item"><a href="/commentManage">全部评论</a> </li>
                                    <li class="breadcrumb-item active">查看评论</li>
                                </ol>
                        </div>
                    </div>
                    <!-- end row -->
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="card mb-3">
                                <div class="card-header">
                                    评论内容
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <span style="font-weight: bold" th:text="${comment.name}"></span>
                                        ([[${ comment.email }]])
                                        在你的文章
                                        <a style="font-weight: bold" th:href="@{article(id=${comment.articleId})}" th:text="${'《'+comment.title+'》'}"></a>
                                        下评论：
                                        <hr>
                                        <div th:text="${comment.content}" style="text-indent: 2em"></div>
                                        <hr>
                                        <small class="float-right" th:text="${#dates.format(comment.time,'yyyy-MM-dd HH:mm:ss')}"></small>
                                        <input id="id" type="hidden" th:value="${comment.getId()}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-6 col-sm-6 col-md-6">
                            <div class="card mb-3">
                                <div class="card-header">
                                    回复
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <div>
                                            <textarea id="content" class="form-control" style="height: 120px" placeholder="在此处输入回复的内容..."></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button class="float-right btn btn-success btn-sm" onclick="replyComment()"><i class="fa fa-send"></i> 回复</button>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-6 col-sm-6 col-md-6" th:if="${comment.reply.size() > 0}">
                            <div class="card mb-3">
                                <div class="card-header">
                                    你的回复
                                </div>
                                <div class="card-body">
                                    <div class="form-group" th:each="reply:${comment.reply}">
                                        <div class="row">
                                            <div class="col-xs-8 col-sm-8 col-md-8" style="text-indent: 2em" th:text="${reply.content}">
                                            </div>
                                            <div class="col-xs-4 col-sm-4 col-md-4">
                                                <small class="float-right" th:text="${#dates.format(reply.time,'yyyy-MM-dd HH:mm:ss')}"></small>
                                            </div>
                                        </div>
                                        <hr>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- END container-fluid -->

            </div>
            <!-- END content -->

        </div>

    </div>
</div>

<!-- END main -->
<!--引入adminkit模板-->
<script src="adminkit/js/app.js"></script>

<script src="background/js/modernizr.min.js"></script>
<script src="background/js/jquery.min.js"></script>
<script src="background/js/moment.min.js"></script>

<script src="background/js/popper.min.js"></script>
<script src="background/js/bootstrap.min.js"></script>

<script src="background/js/detect.js"></script>
<script src="background/js/fastclick.js"></script>
<script src="background/js/jquery.blockUI.js"></script>
<script src="background/js/jquery.nicescroll.js"></script>
<script src="background/js/jquery.scrollTo.min.js"></script>
<script src="background/plugins/switchery/switchery.min.js"></script>

<!-- App js -->
<script src="background/js/pikeadmin.js"></script>

<!-- BEGIN Java Script for this page -->
<script src="common/js/jquery.dataTables.min.js"></script>
<script src="common/js/dataTables.bootstrap4.min.js"></script>
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/common.js"></script>

<script type="text/javascript">
    //解决下拉菜单不显示
    $(function () {
        $('.dropdown-toggle').dropdown();
    })
    // START CODE FOR BASIC DATA TABLE
    function replyComment() {
        var id = $('#id').val().trim();
        var content = $('#content').val().trim();
        if (content == ""){
            swal("警告","回复留言内容不能为空！", "warning");
        }else {
            $.ajax({
                type: "POST",
                url: "replyComment",
                dataType: "json",
                data: {replyId:id,content:content},
                success: function (data) {
                    if (data['code']== 200){
                        swal("回复成功", "", "success");
                        setInterval(reload, 2000);
                    }else {
                        swal("错误", "服务器发生了一个错误", "error");
                    }
                },
                error: function (e) {
                }
            });
        }
    }

    /**
     * 刷新页面
     */
    function reload() {
        window.location.reload();
    }


</script>
<!-- END Java Script for this page -->

</body>
</html>